<template>
	<view class="p-2 animate__animated fast animate__fadeIn">
		<view class="flex align-center justify-between">
			<!-- 头像昵称 | 关注按钮 -->
			<view class="flex align-center ">
				<!-- 头像 -->
				<image 
				@click="openSpace(item.user)" 
				:src="item.userpic" 
				class="rounded-circle mr-2 user_img" 
				lazy-load></image>
				<view>
					<view 
					class="font" 
					style="line-height: 1.5;">{{item.username}}</view>
					<text 
					class="font-sm text-light-muted" 
					style="line-height: 1.5;">{{item.create_date | times}}</text>
				</view>
			</view>
			<block v-if="!(item.user==isUser)">
				<!-- 关注按钮 -->
				<view @click="Follow()" 
				v-if="!item.isFollow" 
				class="flex align-center justify-center rounded bg-main text-white user_follow_buton animate__animated animate__faster"
				hover-class="animate__jello"
				>关注</view>
				<view @click="Follow()"
				v-else 
				class="flex align-center justify-center rounded bg-hover-light text-white user_follow_buton animate__animated animate__faster"
				hover-class="animate__jello"
				>已关注</view>
			</block>
		</view>
		<!-- 标题 -->
		<view class="font-md my-1" @click="openDetail()">
			{{item.title}}
		</view>
		<slot>
			<!-- 图片 -->
			<image v-if="item.titlepic" :src="item.titlepic" @click="openDetail" 
			style="height: 350rpx;" class="rounded w-100" mode="aspectFill"></image>
		</slot>
		<!-- 图标按钮 -->
		<view class="flex align-center">
			<view 
			:class="item.news_list.type==='support' ? 'support-active' : ''"
			@click="doSupport('support')" 
			class="flex flex-1 align-center justify-center animate__animated animate__faster" 
			hover-class="animate__pulse text-main">
				<text class="iconfont icon-dianzan2" style="margin-right: 20rpx;font-size: 35rpx;"></text>
				<text>{{item.news_list.support_count > 0 ? item.news_list.support_count : '支持'}}</text>
			</view>
			<view 
			:class="item.news_list.type==='unsupport' ? 'support-active' : ''"
			@click="doSupport('unsupport')" 
			class="flex flex-1 align-center justify-center animate__animated animate__faster" 
			hover-class="animate__pulse text-main">
				<text class="iconfont icon-cai"  style="margin-right: 20rpx;font-size: 35rpx;"></text>
				<text>{{item.news_list.unsupport_count > 0 ? item.news_list.unsupport_count : '反对'}}</text>
			</view>
			<view @click="doComment()" 
			class="flex flex-1 align-center justify-center animate__animated animate__faster" 
			hover-class="animate__pulse text-main">
				<text class="iconfont icon-pinglun2"  style="margin-right: 20rpx;font-size: 35rpx;"></text>
				<text>{{item.comment_count > 0 ? item.comment_count : '评论'}}</text>
			</view>
			<view @click="doShare()" 
			class="flex flex-1 align-center justify-center animate__animated animate__faster" 
			hover-class="animate__pulse text-main">
				<text class="iconfont icon-fenxiang" style="margin-right: 20rpx;font-size: 35rpx;"></text>
				<text>{{item.share_num > 0 ? item.share_num : '分享'}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {getFavorRecord,getFollowAdd} from "@/network/follow.js";
	export default{
		props:{
			item:Object,
			index:{
				type:Number,
				default:-1
			},
			isdetail:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				uid:null
			}
		},
		computed:{
			isUser(){
				return this.$store.state.userInfo ? this.$store.state.userInfo.id : null
			}
		},
		methods:{
			// 打开个人空间
			openSpace(uid){
				uni.navigateTo({
					url:"/pages/user-space/user-space?user_id="+uid
				})
			},
			// 关注
			Follow(){
				
				this.checkAuth(()=>{
					getFollowAdd(this.item.user).then(res=>{
						// 通知关注更新
						uni.$emit('updateFollowOrSupport',{
							type:"follow",
							data:{
								user_id:this.item.user
							}	
						})
					}).catch(err=>{
						uni.showToast({
							"title":"关注失败",
							"icon":"none"
						})
					})
					
				})
			},
			// 进入详情页
			openDetail(){
				if (this.isdetail) return;
				uni.navigateTo({
					url:'/pages/detail/detail?detail='+JSON.stringify(this.item)
				})
				// 加入历史记录
				let list = uni.getStorageSync("history")
				list = list ? JSON.parse(list) : []
				let index = list.findIndex(v=>v.id === this.item.id)
				if(index === -1){
					list.unshift(this.item)
					uni.setStorageSync("history",JSON.stringify(list))
				}
			},
			// 顶踩功能
			doSupport(type){
				let status = type=="support" ? 1 :2
				this.checkAuth(()=>{
					getFavorRecord(this.item.id,status).then(attr=>{
						// 通知顶踩更新
						uni.$emit('updateFollowOrSupport',{
							type:"support",
							data:{
								news_list:{
									id:this.item.id,
									type:type
								}
							}	
						})
					})	
					
				})
				
			},
			// 评论
			doComment(){
				this.checkAuth(()=>{
					if (!this.isdetail) {
						return this.openDetail()
					}
				})
				
			},
			// 分享
			doShare(){
				if (!this.isdetail) {
					return this.openDetail()
				}
				this.$emit('doShare')
			}
			
		},
		filters:{
			times(value){
				return new Date(+new Date(value) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
			}
		}
	}
</script>

<style>
	.support-active{
		color: #FF4A6A;
	}
</style>
